<template>
  <!-- 页面-系统配置 -->
  <div 
  :class="{'innerPageTable-box-OneTwo': !useTableSearchBar}"
  class="ConfigManage-page innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <!-- 参数编码 -->
          <Form-item prop="configItemCode" :label="$t('module.configManage.parameterCode')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.configItemCode"
              :placeholder="$t('module.configManage.enterparameterCode')"
              @on-enter="search"
            />
          </Form-item>

          <!-- 参数名称 -->
          <Form-item prop="configItemName" :label="$t('module.configManage.parameterName')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.configItemName"
              :placeholder="$t('module.configManage.enterparameterName')"
              @on-enter="search"
            />
          </Form-item>
          <!-- 值来源 -->
          <Form-item prop="valueSetCode" :label="$t('module.configManage.sourceValue')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.valueSetCode"
              :placeholder="$t('module.configManage.enterSourceValue')"
              @on-enter="search"
            />
          </Form-item>
          <!-- 所属应用 -->
          <Form-item prop="applicationCode" :label="$t('module.configManage.application')">
            <Select
              v-model="searchForm.applicationCode"
              style="width:100%"
              :placeholder="$t('module.configManage.selectApplication')"
              filterable
              transfer
              clearable
            >
              <Option
                v-for="app in appList"
                :value="app.clientId"
                :key="app.clientId"
                :style="{ color:app.enabled == 0?'#bcbcbc': '' }"
                :label="app.appName"
              ></Option>
            </Select>
          </Form-item>
          <!-- 状态 -->
          <Form-item prop="enabled" :label="$t('module.configManage.state')">
            <Select
              v-model="searchForm.enabled"
              style="width:100%"
              :placeholder="$t('common.warning.selectStatus')"
              clearable
            >
              <Option
                v-for="item in searchConfigManageList"
                :value="item.vsiKey"
                :key="item.vsiKey"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="reset" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="configTable" :config="pageTableConfig">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
      <!-- table bar 添加-->
      <div slot="table-bar">
        <RPButton optType="create" @click="onEdit({})" />
      </div>
      <Form
        :model="searchForm"
        ref="searchForm"
        v-if="useTableSearchBar"
        slot="table-search-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <!-- 所属应用 -->
          <Form-item prop="applicationCode">
            <Select
              v-model="searchForm.applicationCode"
              style="width:100%"
              :placeholder="$t('module.configManage.selectApplication')"
              @on-change="search(1)"
              filterable
              transfer
              clearable
            >
              <Option
                v-for="app in appList"
                :value="app.clientId"
                :key="app.clientId"
                :style="{ color:app.enabled == 0?'#bcbcbc': '' }"
                :label="app.appName"
              ></Option>
            </Select>
          </Form-item>
          <!-- 状态 -->
          <Form-item prop="enabled">
            <Select
              v-model="searchForm.enabled"
              @on-change="search(1)"
              style="width:100%"
              :placeholder="$t('common.warning.selectStatus')"
              clearable
            >
              <Option
                v-for="item in searchConfigManageList"
                :value="item.vsiKey"
                :key="item.vsiKey"
              >{{ item.vsiValue }}</Option>
            </Select>
          </Form-item>
           <Form-item prop="searchType">
            <Input
              type="text"
              v-model.trim="searchForm.searchTypeValue"
              :placeholder="searchTypePlaceholder"
              @on-enter="search"
              @on-blur="search"
            >
            <template #prepend>
              <Select v-model="searchForm.searchType" style="width: 110px" @on-change="searchTypeChange">
                <Option v-for="item in searchTypeList" :value="item.key" :key="item.key">{{
                item.name
              }}</Option>
              </Select>
            </template>
            </Input>
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
  </div>
</template>
<script>
import { findConfigPage, deleteConfig } from "@/api/configApi.js";
import { searchAppList } from "@/api/applicationApi";
import { systemManageColumn } from "./columns.js";
import locales from "./locales.js";
import EditConfig from "./EditConfig";
import ConfigItemManage from "./ConfigItemManage";
import { CoreModuleName } from "@/const.js";

export default {
  name: "config-manage",
  mixins: [locales],
  data() {
    return {
      useTableSearchBar: false,
      searchForm: {
        configItemCode: null, //参数编码
        configItemName: null,
        valueSetCode: null, //值来源
        applicationCode: "null", //所属应用
        enabled: "null", //状态
        searchType: 'configItemCode',
        searchTypeValue: '',
      },
      searchTypeList: [
        {key: 'configItemCode',  name: this.$t('module.configManage.parameterCode'), placeholder: this.$t('module.configManage.enterparameterCode')},
        {key: 'configItemName',  name: this.$t('module.configManage.parameterName'), placeholder: this.$t('module.configManage.enterparameterName')},
        {key: 'valueSetCode',  name: this.$t('module.configManage.sourceValue'), placeholder: this.$t('module.configManage.enterSourceValue')},
      ],
      searchTypePlaceholder: this.$t('module.configManage.enterparameterCode'),
      searchConfigManageList: [
        {
          vsiKey: "0",
          vsiValue: this.$t("common.disable")
        },
        {
          vsiKey: "1",
          vsiValue: this.$t("common.enable")
        }
      ],
      appList: [],
      templateList: [],
      isRIPPLES: true,
      tenantCode: ""
    };
  },
  computed: {
    //   table 配置项
    pageTableConfig() {
      return {
        loadDataFn: findConfigPage,
        columnsFn: systemManageColumn.bind(this),
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  created() {
    //初始化所属应用
    this.initApplication();
  },
  mounted() {
    this.search();
    let { userInfo } = this.$store.state[CoreModuleName];
    this.isRIPPLES = userInfo.tenantCode == window.RPConfig.rootTenantCode;
    this.tenantCode = userInfo.tenantCode;
  },
  watch: {
    'searchForm.searchType' : {
      handler() {
        let selectItem = this.searchTypeList.find(item => item.key == this.searchForm.searchType)
        this.searchTypePlaceholder =  selectItem ? selectItem.placeholder : ''
      }
    }
  },
  methods: {
    searchTypeChange() {
      if (this.searchForm.searchTypeValue) {
        this.search()
      }
    },
    //初始化所属应用
    initApplication() {
      searchAppList({
        commonPageDTO: { currentPage: 1, pageSize: 999 },
        pageNum: 1,
        pageSize: 999,
        condition: { appName: "", clientId: "" }
      }).then(res => {
        this.appList = res.data.records;
      });
    },
    // 自定义行样式
    rowClassName(row) {
      if (row.hasConfigValue == false) {
        return "tableDisableStyle";
      }
    },
    search(page = 1) {
      // if (this.searchForm.valueSetCode) {
      //   this.$set(this.searchForm, 'valueSetName', this.searchForm.valueSetCode)
      // }

      let searchForms = Object.assign({}, this.searchForm);
      if(this.useTableSearchBar) {
        this.searchTypeList.forEach(item => {
          if (this.searchForm.searchType == item.key) {
            searchForms[item.key] = this.searchForm.searchTypeValue
          } else {
            searchForms[item.key] = ''
          }
        })
      }
      if (searchForms.valueSetCode) {
        searchForms.valueSetName = searchForms.valueSetCode
      }
      delete searchForms.searchType
      delete searchForms.searchTypeValue
      if (searchForms.applicationCode == "null") {
        searchForms.applicationCode = null;
      }
      if (searchForms.enabled == "null") {
        searchForms.enabled = null;
      }
      this.$refs["configTable"].load(searchForms, page);
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    // 编辑主记录
    onEdit(row = {}) {
      new this.$pageModal(
        EditConfig,
        {
          props: {
            tenantCode: this.tenantCode,
            configInfo: row
          }
        },
        data => {
          data && this.search(this.$refs.configTable.param.pageNum);
        }
      );
    },
    // 删除主记录
    onDelete(id) {
      // 删除提示级别：普通
      let idArray = [];
      idArray.push(id);
      new $confirm(this.$t("module.configManage.confirmToDelete"), this).then(() => {
        deleteConfig(idArray).then(res => {
          if (res) {
            this.$message.success({
              content: this.$t("common.deleteSuccess"),
              duration: 3
            });
            this.search();
          } else {
            this.$message.error({
              content: res.msg || "Delete Error!",
              duration: 3
            });
          }
        });
      });
    },
    // 值维护
    onSetting(row) {
      new this.$sidelipPage(ConfigItemManage, {
        props: {
          tenantCode: this.tenantCode,
          configItemId: row.id,
          configInfo: row,
          isRIPPLES: this.isRIPPLES,
          tenantName: this.$store.state[CoreModuleName].userInfo.tenantName
        }
      });
    }
  }
};
</script>
